<template>
  <div class="address-manage-container">
    <van-checkbox-group v-model="result" checked-color="#ee0a24">
      <div class="address-manage-item" v-for="(item) in areaLists" :key="item.id">
        <van-cell
          clickable
          :title="`${item.name} ${item.tel}`"
          :label="item.address"
          
        >
          <template #right-icon>
            <van-icon size="18px" name="close" @click.stop="deleteAreaItem(item)" />
          </template>
          <template #icon>
            <van-checkbox
              label-position="left"
              style="margin-right: 10px;"
              :value="item.id"
              checked-color="#ff5f16"
              :name="item.id"
            ></van-checkbox>
          </template>
        </van-cell>
      </div>
    </van-checkbox-group>

    <van-cell>
      <template #icon>
        <van-checkbox v-model="checkAll" checked-color="#ff5f16">全选</van-checkbox>
      </template>
      <template #default>
        <van-button style="float: right;hgeight: 35px" round type="danger" @click="deleteArray">删除选中</van-button>
      </template>
    </van-cell>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import Vue from "vue";
import { Checkbox, CheckboxGroup, Cell, Button } from "vant";
Vue.use(Checkbox)
  .use(CheckboxGroup)
  .use(Cell)
  .use(Button);
export default {
  data() {
    return {
      result: []
    };
  },
  computed: {
    ...mapState("addressModule", ["areaLists"]),
    checkAll: {
      get: function() {
        if (
          this.areaLists.length !== 0 &&
          this.areaLists.length === this.result.length
        ) {
          return true;
        } else {
          return false;
        }
      },
      set: function(newVal, oldVal) {
        if (newVal) {
          this.result = this.areaLists.map(item=>item.id);
        } else {
          this.result = [];
        }
      }
    }
  },
  methods: {
    ...mapActions("addressModule", ["deleteSelectArea", "deleteArea"]),
    deleteArray() {
      console.log(this.result)
      if (this.result.length) {
        this.deleteSelectArea(this.result /*.map(item=>({id: item}))*/);
        this.result = []
      }
    },
    deleteAreaItem(item) {
      this.deleteArea(item.id);
    }
  }
};
</script>

<style>
.address-manage-container {
  padding: 12px 12px 20px 12px;
}

.address-manage-item {
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
}
</style>
